<template>
  <view>
    <view class="filter-lay sticky">
      <view class="filter-item" @tap="openTypePicker">
        <view >{{ search.industry.length>0 ? search.industry : '分类' }}</view>
        <text class="wlIcon-sanjiao1"></text>
      </view>
      <view class="filter-item" @tap="openCityPicker">
        <view>{{ search.area.length>0 ? search.area : '地区' }}</view>
        <text class="wlIcon-sanjiao1"></text>
      </view>
    </view>
    <view class="shop-item" v-for="(item ,index) in dataList" :key="index" @tap="onGoods(item.id)">
      <image class="shop-item-img" :src="$wanlshop.oss(item.image)" mode="aspectFill"></image>
      <view class="shop-item-right">
        <view class="shop-item-title single-line">{{item.title}}</view>
        <view class="shop-item-info-lay">
          <view>
            <view>招商区域:全国</view>
            <view>招商渠道: {{item.sale_channel | getChannelStr}}</view>
          </view>
          <view class="shop-daili">我要<br>代理</view>
        </view>
        <view style="font-size: 26rpx;color: black" class="single-line">{{ item.shopInfo.shopname }}</view>
        <view style="display: flex;align-items: center; margin-top: 10rpx">
          <view class="cu-tag radius sm margin-right-xs wanl-bg-orange tah-base">企业认证</view>
          <view style="display: flex" class="margin-right-xs">
            <view class="tah-base" :class="item.shopInfo.is_vip === 1 ? 'tah-vip-red-left' : 'tah-vip-gray-left'">{{ item.shopInfo.vip_name }}</view>
            <view class="tah-base" :class="item.shopInfo.is_vip === 1 ? 'tah-vip-red-right' : 'tah-vip-gray-right'">VIP会员</view>
          </view>
        </view>
      </view>
    </view>
    <uni-load-more :status="status" :content-text="contentText" />

    <lb-picker
        :list="cityData"
        :props="cityMap"
        :level="2"
        mode="multiSelector"
        @confirm="cityConfirm"
        ref="cityPicker"/>
    <lb-picker
        :list="typeData"
        :props="typeMap"
        :level="3"
        mode="multiSelector"
        @confirm="typeConfirm"
        ref="typePicker"/>
  </view>

</template>

<script>
import { mapState } from 'vuex';
import LbPicker from '@/components/lb-picker'
export default {
  components: { LbPicker },
  computed: {
    ...mapState(['user', 'statistics','common'])
  },
  filters: {
    getChannelStr (value) {
      switch (value){
        case 0:
          return '全渠道'
        case 1:
          return '线上渠道'
        case 2:
          return '线下渠道'
        default:
          return '无'
      }
    }
  },
  data() {
    return {
      cityData:[],
      typeData:[],
      channelData:[
        { label: '全部渠道', value: 0},
        { label: '线上渠道', value: 1},
        { label: '线下渠道', value: 2}
      ],
      typeMap:{
        label: 'name',
        value: 'id',
        children: 'childlist'
      },
      cityMap:{
        label: 'name',
        children: 'city'
      },
      search:{
        industry:'',
        area:'',
        category_id:'',
        current_page:1,
        limit:20
      },
      dataList:[],
      status: 'loading',
      contentText: {
        contentdown: ' ',
        contentrefresh: '加载中',
        contentnomore: ''
      },
    };
  },
  onLoad(options) {
    this.search.type = options.type
    this.search.sale_channel = options.sale_channel
    // this.search.type = 3
    this.typeData = JSON.parse(JSON.stringify(this.$store.state.common.modulesData.categoryModules))
    this.typeData.unshift({
      "id": -1,
      "pid": 0,
      "name": "全部",
      "image": "",
      "spacer": "",
      "childlist": []
    })
    var title = options.title
    if (title) {
      uni.setNavigationBarTitle({
        title: title
      });
    }
    this.getCityData()
    this.getList()
  },
  onPullDownRefresh() {
    this.search.current_page = 1;
    this.getList()
  },
  onReachBottom() {
    //判断是否最后一页
    this.status = 'loading';
    this.getList();
  },
  methods: {
    getCityData() {
      uni.request({
        url: 'https://www.xiushibang.com/uploads/city.json',
        success: (res) => {
          this.cityData = res.data
          this.cityData.unshift({name: '全部'})
        }
      });
    },
    openTypePicker() {
      this.$refs.typePicker.show() // 显示
    },
    typeConfirm(e) {
      console.log(e)
      var value = e.value
      var valueName = []
      for (var i = 0; i < value.length; i++) {
        valueName.push(e.item[i].name)
      }
      if (valueName.length === 1 && valueName[0] === '全部') {
        this.search.industry = ''
        this.search.category_id = ''
      } else {
        this.search.industry = valueName.join('/')
        this.search.category_id = e.value[e.value.length - 1]
      }
      this.search.current_page = 1
      this.getList()
    },
    openCityPicker() {
      this.$refs.cityPicker.show() // 显示
    },
    cityConfirm(e) {
      var value = e.value
      var valueName = []
      for (var i = 0; i < value.length; i++) {
        if (!(i !== 0 && e.item[i].name === "全部")){
          valueName.push(e.item[i].name)
        }
      }
      console.log(valueName)
      if (valueName.length === 1 && valueName[0] === '全部') {
        this.search.area = ''
      } else {
        this.search.area = valueName.join('/')
      }
      this.search.current_page = 1
      this.getList()
    },
    getList() {
      this.$api.get({
        url: '/wanlshop/product/goodsNav',
        data: this.search,
        success: res => {
          if (this.search.current_page === 1) {
            this.dataList = res.data;
          } else {
            this.dataList = this.dataList.concat(res.data)
          }

          if (res.last_page === res.current_page) {
            this.status = 'noMore';
          } else {
            this.status = 'more';
            this.search.current_page++;
          }
        }
      });
    },
  },
}
</script>

<style lang="scss">
.filter-lay {
  display: flex;
  align-items: center;
}

.filter-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80rpx;
  flex: 1;
}
//
//.shop-lay {
//  display: flex;
//  flex-wrap: wrap;
//  justify-content: space-between;
//  padding: 30rpx;
//  overflow: hidden;
//}
//
.shop-item {
  padding:20rpx;
  display: flex;
}

.shop-item-img {
  width: 200rpx;
  height: 200rpx
}
.shop-item-right{
  flex: 1;
  margin-left: 20rpx
}

.shop-item-title {
  font-size: 28rpx;
  width: 480rpx;
  color: black;
  font-weight: bold

}
.shop-item-info-lay{
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #999;
  font-size: 22rpx;
}
.shop-daili{
  background-color: red;
  border-radius: 50%;
  color: white;
  width: 80rpx;
  height: 80rpx;
  text-align: center;
  font-size: 22rpx;
  padding-top: 10rpx
}

.single-line {
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 隐藏溢出的内容 */
  text-overflow: ellipsis; /* 溢出部分显示为省略号 */
}

.sticky {
  position: -webkit-sticky; /* 兼容 Safari */
  position: sticky;
  top: 0;
  width: 100%;
  background-color: #f8f9fa;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}
.tah-vip-red-left{
  border: 1rpx red solid;
  color: red;
  line-height: 32rpx;
  background-color: white
}
.tah-vip-red-right{
  background-color: red;
  color: white;
}

.tah-vip-gray-left{
  margin-right: 0;
  border: 1rpx gray solid;
  color: gray;
  background-color: white
}
.tah-vip-gray-right{
  background-color: gray;
  color: white;
}

.tah-base{
  padding: 0 18rpx !important;
  height: 40rpx  !important;
  font-size: 20rpx  !important;
  line-height: 40rpx  !important;
}

</style>
